<html>
  <head>
  <link rel=stylesheet href="./main.css" type="text/css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){init();});

    function init(){
      // Do some initialization work.
      $.post("/show_all.xml", {}, showResults);
    }

    function showResults(result) {
      alert(result);
      // Start building HTML string that will be displayed in <div>.
      var html = '<TABLE>';
      html += '  <THEAD class="title">';
      html += '    <TR><TH class="col1">Date</TH><TH>Summary</TH><TH>Incomes</TH><TH>Expenses</TH><TH class="col5">Balance</TH></TR>';
      html += '  <THEAD class="input">';
      html += '    <TR><TD class="col1"><input class="rounded" type="text" name="issue_date" value="'+today+'" /></TD>';
      html += '        <TD class="col2"><input class="rounded" type="text" name="summary" value="icecream" /></TD>';
      html += '        <TD class="col3"><input class="rounded" type="text" name="incomes" value="180" /></TD>';
      html += '        <TD class="col4"><input class="rounded" type="text" name="expenses" value="180" /></TD>';
      html += '        <TD class="col5"><input class="rounded button" type="button" name="submit" value="submit" onClick="insert();" /></TD>';
      html += '    </TR>';
      html += '  <TBODY>';
    
      // obj.data contains a Document DOM element corresponding to the page that was requested
      var domdata = result;
    
      var itemList = domdata.getElementsByTagName("entity");
      minimsg.createDismissibleMessage("We have "+itemList.length+" entities.");
    
      // Loop through all <entity> nodes
      for (var i = 0; i < itemList.length ; i++) {
        if (itemList.item(i).nodeType != 1) continue; //Only process element type
    
        var nodeList = itemList.item(i).childNodes;
        for (var j = 0; j < nodeList.length ; j++) {
          if (nodeList.item(j).nodeType != 1) continue; //Only process element type
    
          var node = nodeList.item(j);
          if (node.getAttribute("name") == "issue_date") { var issue_date = node.firstChild.nodeValue; }
          if (node.getAttribute("name") == "summary") { var summary = node.firstChild.nodeValue; }
          if (node.getAttribute("name") == "incomes") { var incomes = node.firstChild.nodeValue; }
          if (node.getAttribute("name") == "expenses") { var expenses = node.firstChild.nodeValue; }
        }
        if (i%2==0)
          html += '<TR class="even"><TD class="col1">'+issue_date.substring(0,10)+'</TD><TD>'+summary+'</TD><TD>'+incomes+'</TD><TD>'+expenses+'</TD><TD class="col5">100</TD></TR>';
        else
          html += '<TR class="odd"><TD class="col1">'+issue_date.substring(0,10)+'</TD><TD>'+summary+'</TD><TD>'+incomes+'</TD><TD>'+expenses+'</TD><TD class="col5">100</TD></TR>';
      }
      html += '  <TFOOT>';
      html += '    <TR><TH class="col1">Date</TH><TH>Summary</TH><TH>Incomes</TH><TH>Expenses</TH><TH class="col5">Balance</TH></TR>';
      html += '  </TABLE>';
      document.getElementById('content_div').innerHTML = html;
    }

  </script>
  </head>

  <body>
  <div id="content_div"></div>
  </body>
</html>
